<template>
  <div class="rank-table-box" ref="tableBox">
    <table>
      <thead>
        <tr ref="tableTitle">
          <th>
            <span>细分领域</span>
          </th>
          <th>
            <span>
              <div class="title-wrapper">
                <div>企业数量</div>
                <div class="btn-wrapper">
                  <div
                    class="triangle triangle-up"
                    :class="{ numberUp: numberUp }"
                    @click="changeNumberUp"
                  ></div>
                  <div
                    class="triangle triangle-down"
                    :class="{ numberDown: numberDown }"
                    @click="changeNumberDown"
                  ></div>
                </div>
              </div>
            </span>
          </th>
          <th>
            <span>
              <div class="title-wrapper">
                <div>增速</div>
                <div class="btn-wrapper">
                  <div
                    class="triangle triangle-up"
                    :class="{ rateUp: rateUp }"
                    @click="changeRateUp"
                  ></div>
                  <div
                    class="triangle triangle-down"
                    :class="{ rateDown: rateDown }"
                    @click="changeRateDown"
                  ></div>
                </div>
              </div>
            </span>
          </th>
          <th>
            <span>产业门类</span>
          </th>
        </tr>
      </thead>

      <tbody ref="tbody">
        <tr v-for="(t, j) in itemList" ref="tableContent" :key="j">
          <td v-for="(c, k) in columns" :key="k">
            <span>{{ t[columns[k].props] }}</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  components: {},
  props: ['tableData'],
  data() {
    return {
      columns: [
        {
          name: '细分领域',
          props: 'field'
        },
        {
          name: '企业数量',
          props: 'number'
        },
        {
          name: '增速',
          props: 'rate'
        },
        {
          name: '产业门类',
          props: 'category'
        }
      ],
      index: 0,
      list: [],
      numberUp: true,
      numberDown: false,
      rateUp: false,
      rateDown: false
    }
  },
  created() {},
  mounted() {
    this.$refs.tbody.addEventListener('mouseenter', () => {
      this.timer && clearInterval(this.timer)
    })
    this.$refs.tbody.addEventListener('mouseleave', () => {})
  },
  computed: {
    dataList: function () {
      this.list = [...this.tableData]
      if (this.numberUp) {
        this.list.sort((a, b) => a.number - b.number)
      } else if (this.numberDown) {
        this.list.sort((a, b) => b.number - a.number)
      } else if (this.rateUp) {
        this.list.sort((a, b) => parseFloat(a.rate) - parseFloat(b.rate))
      } else if (this.rateDown) {
        this.list.sort((a, b) => parseFloat(b.rate) - parseFloat(a.rate))
      } else {
        this.list = this.tableData
      }
      let resultList = []
      for (let i = 0; i < this.list.length; i += 5) {
        if (i + 5 < this.list.length) {
          resultList.push(this.list.slice(i, i + 5))
        } else {
          resultList.push(this.list.slice(i, this.list.length))
        }
      }
      return this.list
    },
    itemList() {
      let itemList = []
      itemList = this.dataList
      return itemList
    }
  },
  watch: {},
  methods: {
    init() {
      let tl = new TimelineMax({})
      tl.addLabel('start')
      let tableBox = TweenMax.from(this.$refs.tableBox, 0.3, { opacity: 0 })
      tl.add(tableBox, 'start+=0.3')
      let tableTitle = TweenMax.from(this.$refs.tableTitle, 0.3, {
        transform: 'scaleY(0)',
        opacity: 0,
        ease: Back.easeIn
      })
      tl.add(tableTitle, 'start+=0')
      let tableContentlist = this.$refs.tableContent
      let len = tableContentlist.length
      if (len > 5) {
        len = 5
      }
      let lines1 = {}
      for (let i = 0; i < len; i++) {
        lines1[`line${i + 1}`] = TweenMax.fromTo(
          tableContentlist[i],
          0.4,
          {
            transform: 'scaleY(0)',
            opacity: 0,
            ease: Back.easeIn
          },
          {
            transform: 'scaleY(1)',
            opacity: 1
          }
        )
      }

      for (let i = 0; i < len; i++) {
        tl.add(lines1[`line${i + 1}`], 'start+=' + (i * 0.2 + 0.2))
      }
      return tl
    },
    update() {
      this.$nextTick(() => {
        let tl = new TimelineMax({})
        tl.addLabel('start')
        let tableContentlist = this.$refs.tableContent
        let len = tableContentlist.length
        let lines1 = {}
        for (let i = 0; i < len; i++) {
          lines1[`line${i + 1}`] = TweenMax.fromTo(
            tableContentlist[i],
            0.4,
            {
              transform: 'scaleY(0)',
              opacity: 0,
              ease: Back.easeIn
            },
            {
              transform: 'scaleY(1)',
              opacity: 1
            }
          )
        }

        for (let i = 0; i < len; i++) {
          tl.add(lines1[`line${i + 1}`], 'start+=' + i * 0.2)
        }
        return tl
      })
    },
    changeNumberUp() {
      this.numberUp = !this.numberUp
      if (this.numberUp) {
        this.numberDown = false
        this.rateDown = false
        this.rateUp = false
      }
      this.timer && clearInterval(this.timer)
      this.index = 0
      this.$nextTick(() => {
        this.update()
        // this.autoPlay()
      })
    },
    changeNumberDown() {
      this.numberDown = !this.numberDown
      if (this.numberDown) {
        this.numberUp = false
        this.rateDown = false
        this.rateUp = false
      }
      this.timer && clearInterval(this.timer)
      this.index = 0
      this.$nextTick(() => {
        this.update()
        // this.autoPlay()
      })
    },
    changeRateUp() {
      this.rateUp = !this.rateUp
      if (this.rateUp) {
        this.numberUp = false
        this.numberDown = false
        this.rateDown = false
      }
      this.timer && clearInterval(this.timer)
      this.index = 0
      this.$nextTick(() => {
        this.update()
        // this.autoPlay()
      })
    },
    changeRateDown() {
      this.rateDown = !this.rateDown
      if (this.rateDown) {
        this.numberUp = false
        this.numberDown = false
        this.rateUp = false
      }
      this.timer && clearInterval(this.timer)
      this.index = 0
      this.$nextTick(() => {
        this.update()
        // this.autoPlay()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.rank-table-box {
  position: relative;
  width: 228px;
  height: 241px;
  padding-top: 3px;
  font-size: 14px;
  .table-box-scroll {
    overflow: auto;
    width: 100%;
    height: 100%;
    &::-webkit-scrollbar {
      width: 0;
    }
  }
  table {
    width: 100%;
    display: block;
    tr {
      transform-origin: center top;
    }
    thead {
      table-layout: fixed;
      th {
        color: #fff;
        &:nth-child(1),
        &:nth-child(2),
        &:nth-child(3) {
          border-right: 6px solid rgba(0, 0, 0, 0);
        }
        &:nth-child(1) {
          width: 178px;
          text-align: left;
          span {
            padding-left: 10px;
          }
        }
        &:nth-child(2) {
          width: 92px;
        }
        &:nth-child(3) {
          width: 60px;
        }
        &:nth-child(4) {
          width: 82px;
        }
      }
      &:before,
      &:after {
        display: block;
        position: absolute;
        top: -1px;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: #035ef0;
        content: '';
      }
      &:after {
        top: 36px;
      }
      .title-wrapper {
        display: flex;
        align-items: center;
        width: 100%;
        justify-content: center;
      }
      .btn-wrapper {
        margin-left: 7px;
        margin-top: -2px;
        .triangle {
          cursor: pointer;
        }
        .triangle-up {
          width: 0;
          height: 0;
          border-left: 6px solid transparent;
          border-right: 6px solid transparent;
          border-bottom: 5px solid rgba(255, 255, 255, 0.3);
        }
        .triangle-down {
          width: 0;
          height: 0;
          border-left: 6px solid transparent;
          border-right: 6px solid transparent;
          border-top: 5px solid rgba(255, 255, 255, 0.3);
          margin-top: 5px;
        }
        .numberUp,
        .rateUp {
          border-bottom: 5px solid #d95c09;
        }
        .numberDown,
        .rateDown {
          border-top: 5px solid #d95c09;
        }
      }
    }
    th,
    td {
      text-align: center;
    }
    th span {
      display: inline-block;
      width: 100%;
      height: 30px;
      line-height: 30px;
      padding: 0 5px;
      background-color: #035ef01a;
      white-space: nowrap;
    }

    tbody {
      color: #fff;
      height: 200px;
      overflow: auto;
      display: block !important;
      margin-top: 4px;
      &::before {
        display: block;
        content: '-';
        height: 5px;
        color: rgba(0, 0, 0, 0);
      }
      tr {
        height: 40px;
        line-height: 40px;
        transform-origin: center top;
        &:nth-child(2n) {
          background-color: #035ef01a;
          span {
            display: inline-block;
            width: 100%;
          }
        }
        td {
          &:nth-child(1) {
            text-align: left;
            span {
              padding-left: 10px;
              display: block;
              width: 178px;
              height: 40px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
          &:nth-child(1) {
            width: 178px;
            text-align: left;
            span {
              padding-left: 10px;
            }
          }
          &:nth-child(2) {
            width: 92px;
          }
          &:nth-child(3) {
            width: 60px;
          }
          &:nth-child(4) {
            width: 82px;
          }
        }

        span {
          padding: 0 5px;
        }
      }
    }
  }
}
</style>
